---
title: 从 VuePress 迁移
description: 将现有的 VuePress 项目迁移到 Astro 的技巧
sidebar:
  label: VuePress
type: migration
stub: true
framework: VuePress
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[VuePress](https://vuePress.vuejs.org) 是一个基于 Vue 构建的开源静态站点生成器.

## VuePress 和 Astro 的主要相似之处

VuePress 和 Astro 有一些共同的特点，这些相似之处将有助于你迁移项目：

- VuePress 和 Astro 都是现代的 JavaScript 静态网站生成器，具有类似的项目文件结构。它们都使用 [特殊的`src/pages/`文件夹来进行基于文件的路由](/zh-cn/basics/astro-pages/)。因此，在创建和管理站点页面时，你应该会感到非常熟悉。

- Astro 和 VuePress 都是为 [内容驱动的网站](/zh-cn/concepts/why-astro/#内容驱动) 设计的，它们都拥有出色的内置 Markdown 文件支持。因此，在使用 Markdown 编写内容时，你会感到非常熟悉，并且你可以保留现有的内容。

- Astro 提供了 [官方集成的 Vue 组件使用方式](/zh-cn/guides/integrations-guide/vue/) 并且支持 [安装NPM包](/zh-cn/guides/imports/#npm-包)，其中包括一些适用于 Vue 的包。你可以编写 Vue UI 组件，并且可能可以保留你现有的部分或全部 Vue 组件和依赖项。


## VuePress 和 Astro 的主要区别

当你将 VuePress 站点重构为 Astro 站点时，你会注意到一些重要的差异：

- VuePress 是基于 Vue 的单页面应用（SPA）。而 Astro 站点是使用 [`.astro`组件](/zh-cn/basics/astro-components/)构建的多页面应用（MPA），同时也支持 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/zh-cn/guides/framework-components/) 和原生 HTML 模板。

- [模板布局](/zh-cn/basics/layouts/): VuePress 站点使用 Markdown (`.md`) 文件作为页面内容，同时使用 HTML (`.html`) 模板作为布局。而 Astro 则是基于组件的，使用了 Astro 组件来构建页面的HTML模板、布局以及单个的 UI 元素。Astro 也可以通过[`.md` and `.mdx` 文件](/zh-cn/guides/markdown-content/) 来创建页面，通过 Astro 布局组件将 Markdown 内容封装在页面模板中。

- VuePress 是为内容丰富的 Markdown 优先网站设计的，并且它还具有一些内置的、专为文档设计的网站功能，而这些功能需要你自己在 Astro 中构建。同时，Astro 也提供了一些专为文档编写的功能，通过 [官方文档主题](https://starlight.astro.build) 就能够实现。本网站是该模板的灵感来源！你还可以在我们的主题展示页面中找到更多内置各种功能的 [社区文档主题](https://astro.build/themes?search=&categories%5B%5D=docs)。

## 从 VuePress 迁移到 Astro 的步骤

要将 VuePress 文档网站转换为 Astro ，可以通过我们的官方 [Starlight 文档主题起始模板](https://starlight.astro.build/zh/)开始创建，或者在我们的 [主题展示页面](https://astro.build/themes?search=&categories%5B%5D=docs) 中探索更多社区文档主题。

你可以在 `create astro` 命令中使用 `--template` 参数，并选择其中一个官方起始模板来开始一个新的 Astro 项目。另外，你也可以 [从 GitHub 上的任意现有 Astro 存储库开始一个新项目](/zh-cn/install-and-setup/#通过-cli-向导安装)。

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template starlight
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template starlight
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template starlight
    ```
    </Fragment>
  </PackageManagerTabs>

带着你现有的 Markdown 内容来 [创建 Markdown 页面](/zh-cn/guides/markdown-content/)。 你仍然可以利用 [基于文件的路由](/zh-cn/guides/routing/)，只需将这些文档从 VuePress 的 `docs` 文件目录下 移动到 Astro 的 `src/pages/` 目录下，并且保证创建了与现有的 VuePress 项目对应的文件夹，就能够保留现有的 URL. 

VuePress 或你安装的其他任意主题可能已经为你处理了大部分站点的布局和元数据。你可能希望阅读关于 [在 Astro 中将 Markdown 页面封装为布局](/zh-cn/basics/layouts/#markdown-布局) 以了解如何在 Astro 中自行管理模板，包括页面的 `<head>` 部分。

你可以在 [astro.new](https://astro.new) 上找到 Astro 的文档起始模板和其他模板。你能够找到每个项目的 GitHub 链接，以及可以在 IDX、StackBlitz、CodeSandbox 和 Gitpod 等在线开发环境中打开一个可工作的项目的一键连接。

## 社区资源

:::note[有想要分享的资源吗？]
如果你找到（或制作）了一个关于将 VuePress 网站转换为 Astro 的有用的视频或博客文章，请将其 [添加到这个列表中](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-vuepress.mdx)！
:::
